<template>
  <div v-loading="loading">
    <div style="height: calc(100% - 50px);overflow: auto;">
      <el-table v-loading="loading" :data="sysRoleExportHistoryList" border>
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('创建人')" align="center" prop="userName" min-width="180" />
        <el-table-column :label="$t('开始时间')" align="center" prop="startTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('结束时间')" align="center" prop="successTime" min-width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.successTime !== null">{{ parseTime(scope.row.successTime, '{y}-{m}-{d} {h}:{i}') }}</span>
            <el-link v-else type="primary" :underline="false" @click="queryHandle"><i class="el-icon-loading" />{{ $t('请稍后,点我刷新') }}</el-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('完成状态')" align="center" prop="status" min-width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.status === '导出成功'" style="color: #0DA708">{{ $t(scope.row.status) }}</span>
            <span v-else-if="scope.row.status === '导出失败'" style="color: #ff2f47">{{ $t(scope.row.status) }}</span>
            <span v-else>{{ $t(scope.row.status) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-download"
              :disabled="isEmpty(scope.row.fileId)"
              @click="downloadHandle(scope.row)"
            >{{ $t('下载') }}</el-button>
            <el-button
              size="small"
              type="text"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row)"
            >{{ $t('删除') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      <el-button type="primary" @click="queryHandle">{{ $t('刷新') }}</el-button>
      <el-button type="warning" @click="handleExport">{{ $t('导出用户角色') }}</el-button>
      <!--<el-button type="warning" @click="handleExportFolder">{{ $t('导出文档角色') }}</el-button>-->
    </div>
  </div>
</template>

<script>
import {
  delSysRoleExportHistory,
  exportFolderRoleHistory,
  exportSysRoleExportHistory,
  listSysRoleExportHistory
} from '@/api/system/role'
import { downLoadFileOpen } from '@/utils/zipdownload'

export default {
  components: {},
  props: {},
  data() {
    return {
      // 遮盖层
      loading: false,
      queryText: '',
      // 总条数
      total: 0,
      // 系统角色导出历史表格数据
      sysRoleExportHistoryList: [],
      // 弹出层标题
      title: '系统角色导出历史',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        userId: this.$store.state.user.userId,
        userName: undefined,
        startTime: undefined,
        successTime: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10
      },
      parentQueryParams: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    }
  },
  watch: {},
  created() {
  },
  methods: {
    /** 打开页面加载 **/
    init(queryData, textContextArr) {
      this.queryText = textContextArr
      this.parentQueryParams = queryData
      this.getList()
    },
    /** 查询系统角色导出历史列表 */
    getList() {
      this.loading = true
      listSysRoleExportHistory(this.queryParams).then(response => {
        this.sysRoleExportHistoryList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 表单重置 **/
    reset() {
      this.form = {
        id: undefined,
        userName: undefined,
        startTime: undefined,
        successTime: undefined,
        status: '正在生成'
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 取消按钮 **/
    cancel() {
      this.$parent.$parent.exportOpen = false
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      var _this = this
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        _this.loading = true
        return delSysRoleExportHistory(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(() => {
        this.loading = false
      })
    },
    /** 导出 **/
    handleExport() {
      this.loading = true
      exportSysRoleExportHistory().then(res => {
        this.msgSuccess(this.$t(res.msg))
        this.getList()
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 导出文档库角色
     */
    handleExportFolder() {
      this.loading = true
      exportFolderRoleHistory().then(res => {
        this.msgSuccess(this.$t(res.msg))
        this.getList()
      }).catch(() => {
        this.loading = false
      })
    },
    /** 下载 **/
    downloadHandle(row) {
      downLoadFileOpen(row.fileId)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .my-label {
  width: 150px;
}
.query-form-height {
  height: 50px !important;
  overflow: hidden !important;
}
/deep/.el-table td {
  padding: 0px !important;
}
</style>
